// 新闻详情
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView
} from 'react-native';

// http://c.3g.163.com/nc/article/BMU8KHQD00964J4O/full.html

let NewsDetail = React.createClass({
    getDefaultProps(){
      return{

      }
    },

    getInitialState(){
      return{
          // 具体的数据
          detailData: ''
      }
    },

    render() {
        return (
            <WebView
                automaticallyAdjustContentInsets={true}
                style={styles.webView}
                source={{html: this.state.detailData, baseUrl: ''}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                startInLoadingState={true}
                scalesPageToFit={this.state.scalesPageToFit}
            />
        );
    },

    // 新闻详情加载：通过webview加载
    componentDidMount(){
       // 请求的路径
       // this.props.rowData.docid 从列表页面传递过来的参数
       let url_api = 'http://c.3g.163.com/nc/article/' + this.props.rowData.docid + '/full.html';
       console.log("接口地址："+url_api);

      // 发送请求
       fetch(url_api)
           .then((response) => response.json())
           .then((responseData)=>{
               console.log("接口URL："+url_api);
               // 处理拿到的数据
               let allData = responseData[this.props.rowData.docid];

               console.log(allData);

               // 拿到body
               let bodyHtml = allData['body'];
               // 对图片再处理
               if(allData['img'].length > 0){
                   for(let i=0; i<allData['img'].length; i++){
                       let img      = allData['img'][i];  // 取出单个图片对象
                       let imgSrc   = img['src'];         // 取出src
                       let imgHtml  = '<img src="' + imgSrc + '" width="100%">'; // 图片100%宽度
                       // 替换body中的图像占位符
                       bodyHtml = bodyHtml.replace(img['ref'], imgHtml);
                   }
               }
               console.log(allData);

               // 更新状态机
               this.setState({
                   detailData:bodyHtml
               });

           })
           .catch((error) => {
               alert('请求数据失败');
           })


    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

// 输出类
module.exports = NewsDetail;
